Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"

Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.

Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>
#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear; /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear; /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear; /* efecto opacidad de la imagen */
transition: opacity .3s linear; /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}

(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.

A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.

Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.

Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.

Y eso es todo ver ejemplo en el footer de este blog
Unknown

hola gem@. lo he hecho todo paso a paso en http://paraninosconcabeza.blogspot.com. pero no me aparece el carrousel... he quitado el borde y el color de fondo he puesto blanco. esos son los únicos cambios que he hecho. ¿qué otra cosa puede ser? besos!

Responder
Gem@

:: Lileka he probado de nuevo y todo está correcto, inténtalo en otro blog por si fuera que estás usando otra librería distinta a jQuery y creara conflicto.

Responder
María Pilar

Me gusta, me gusta mucho y en cuanto tenga tiempo me voy a poner a ello para instalarlo en mi blog. Ya te contaré. Un abrazo. :)

Responder
en-rHed- ando

Divino!! justo buscaba esto o por el estilo hoy, y vas tu y zas!! pues ya lo puse, soberbio!! muchas gracias Gema :D

Responder
Directorio de páginas de autos

Hola GEMA!
Un pregunta, no de css, sino de RSS.

¿Cómo puedo hacer para poner un RSS en cada entrada?

Es decir, si en una entrada yo voy a hablar de un BLOG, me gustaría que esa entrada tuviera un FEED para que se actualice sólo.

Se puede?, y como se hace?

Responder
Directorio de páginas de autos

@Directorio de páginas de autos

Me refiero a que si por ejemplo en una entrada yo hablo del blog de GEMA, en esa entrada exista un feed de lo que vayas actualizando en tu página.

Responder
María Pilar

Los pasos a seguir son muy sencillos y el resultado es muy vistoso, estoy de acuerdo y lo he puesto en mi blog. Gracias por compartirlo. Espero que la niña alegre vuestros momentos. :)

Responder
Héctor Hernández

Wow gema, me ha gustado mucho y lo mejor de todo que se actualiza automaticamente gracias a los Feeds!!! ahorrandonos mucho trabajo con estar cambiando los enlaces e imagenes de los slide mas comunes =D puedes ver como me ha quedado y gracias por todo gema: =D

http://entretenimientoinformatico.blogspot.com/

Responder
Gem@

:: m.p.moreno te quedó muy bien pero igual si le das más ancho ocuparía todo el gadget por ejemplo aumenta en width:550px a width:850px ;)
La bebé genial, me trae loquita y mañana la tengo aquí en casa :D

:: en-rHed- ando ¿Viste que lo adiviné?? :D :d

:: Directorio de páginas de autos no lo tengo explicado y en un comentario se haría muy extenso pero en Vagabundia lo vi hace tiempo detallado:
http://vagabundia.blogspot.com/

:: Me alegra que te guste Héctor Hernández quedó muy bien en la sidebar :)

Responder
Beben Koben

I was dizzy gem@, but if it's here where microdata interested in ...
failed again for me...zzzz
clash with my header my snippet...-___-'

http://homebiss.blogspot.com/

Responder
María Pilar

Me has adivinado el pensamiento porque era lo que me faltaba, pero lo dejé porque era muy tarde. Ahora ya lo he cambiado. Gracias por tu sugerencia y besos y achuchones para tu niña.:)

Responder
Andrea L.

Hola Gem@, me gusta muchisimo este gadget pero tengo una preguntita me gustaria usarla para las reseñas puedo cambiar donde va la url del blog por la direccion de la pagina de reseñas?
Gracias por tu pronta respuesta.

Responder
Adrián J. Messina

Hola Julia, una consulta.
¿Es posible mostrar este carrousel en una entrada de una etiqueta específica?
Gracias

Responder
Gem@

:: En una entrada de una etiqueta o con las imágenes en miniatura de una sola etiqueta?

Responder
Adrián J. Messina

@Gem@Me serviría que sea igualmente con las imágenes en miniatura de una sola etiqueta.

De todas formas, si sabes como hacer para que se logre en una entrada de una etiqueta, mucho mejor.

Gracias!!!!

Responder
Gem@

:: Saludos Beben Koben :)

:: Gracias por los achuchones m.p.moreno le encantan :)

:: Andy puede añadirse cualquier url :)

:: Adrián J. Messina es que no entiendo bien lo que deseas hacer.
Que se vea en una entrada ? o en todas las entradas de una misma etiqueta? es que te he preguntando pero sin saber si es posible porque seguramente hay que añadir el script condicionándolo de forma que se muestre en esa entrada pero te hablo sin saber si es posible.
Consulta eso a Vagabundia porque si fuera posible hacerlo él te lo sabrá explicar.

Responder
HTH

Muchísimas gracias por este aporte, ha sido de gran utilidad. Solo tengo un pequeño problema, me gustaría disminuir el espacio que queda entre el carrousel y el titulo del blog. ¿se puede? Saludos

Responder
minimosntruo

ayudaaaaaaaaaa plisss me encanto pero en mi blog no se mueve¡¡¡¡ q pasa hice too como se indico
e hecho too mas de 10 veces pero aun no se mueve q sera mi blog.... esta ensima de las entrada:http://lafamiliagermanotta.blogspot.com/

Responder
Gem@

:: Hablandodetecnologiahoy intenta subirlo con margin-top: 0px; en los estilos de #carrousel li :)


:: minimosntruo aparentemente debería funcionar y para saber si algo está creando conflicto intenta añadirlo en otro blog.

Responder
Unknown

hola gem@, lo he intentado en otro blog, pero tampoco... no sé qué ocurre. voy a volver a intentarlo en otro blog. te aviso...

Responder
Unknown

lo he insertado en http://lafacunews.blogspot.com/ y tampoco funciona... no sé qué debo hacer!!!

Responder
Unknown

hola gem@. supon que ya estoy usando jQuery en mis blogs, ¿cual sería la diferencia? ¡qué debería poner y qué no?

Responder
EpideMia

me quedó de lujo gema!!


Muchas gracias!!!

Responder
Gem@

:: Lileka si ya lo estás usando la librería no es necesario añadirla. En la entrada dice:

"A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>"

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Esa parte no es necesario añadirla dos veces.

:: EpideMia de lujo :D

Responder
minimosntruo

brobado en 6 blogs y igual no se mueve

Responder
Gem@

:: minimosntruo como verás la mayoría no tiene problemas y en mis ejemplos si funciona.
¿Dónde lo tienes añadido ahora?

Responder
Gem@

:: Hablandodetecnologiahoy no había visto tu comentario :S
Prueba añadiendo un margen negativo de esta forma
margin: -40px 10px así se consigue dejar menos espacio.

Responder
Otto la piloto

Hola Gema,
Mi duda es parecida a la que Adrián planteó en el comentario 15. Mi intención es publicar una entrada con todas las imágenes del blog, para que se vean como un collage, como si fuera una de las vistas dinámicas de blogger pero metido SOLO en una entrada. Podrías ayudarme?? gracias :-)

Responder
Gem@

Lo que deseas hacer haría una entrada interminable y creo que necesitaría una paginación lo qu enos llevaría a un resultado como el de la siguiente entrada sólo que en ella se muestra los títulos de cada entrada y lo que podemos hacer es mostrar sólo las imágenes de cada entrada, sería cuestión de modificar los estilos.

http://www.gemablog.com/2011/09/entradas-resumidas-con-miniatura-y.html

Responder
Cult

Hola Gema quería agradecerte, me quedo andando muy bien
http://www.cultmoviez.net/

Quería hacerte una consulta, bueno un par

esto se puede hacer con etiquetas y con entradas populares?

Saludos

Unknown

Cut Moviez...Este slider es para las entradas mas recientes,es decir si yo agrego una pelicula automaticamente se colocara en el slider....saludos

Responder
Unknown

Wow Gema eres la mejor quedo perfecto en mi web http://www.vien2pelis.net/ Graciasssssssssssss

Responder
Unknown

Quedo exlente,pero tarda como 2 segundos para que se alinien las imagenes...Me podrias ayudar con eso porfas Gem@ te lo agredeceria mucho,gracias,saludos...

Gem@

Hola Ernesto, prueba modificando la velocidad en "duration : 3000" a mayor valor más lento va el efecto.

Gem@

Me olvidaba, eso lo encontrarás en el script que encontramos en el archivo de texto ;)

Unknown

Hola Gema Como estas,fijate que no me dio resultado modificando los valores que me dijistes,pero de todos modos mil gracias,saludos

Gem@

Lo que te dije es para aumentar y disminuir la velocidad del efecto, pero ten en cuenta que ese tiempo que dices que tarda debe ser ser porque la página no ha cargado por completo.

Unknown

Gracias Gema creo que lo pondre en una pagina de peliculas infantiles quedara bien,gracias,saludos

Gem@

Suerte ! :)

Responder
J.L.A.

Fantástico, funcionó a la primera. Saludos

Gem@

Gracias por comentar Atalaya, me alegra que tengas buen resultado :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top